import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import BasicLayout from './BasicLayout';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
// import PageLoading from '@/components/PageLoading'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
import Authorized from '@/components/Authorized';
import Redirect from 'umi/redirect';

import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

@connect(({ app: { menu = [], user = {} }, loading }) => ({ menu, user, loading }))
class AuthBasicLayout extends React.Component {
  state = {
    loading: true,
  };
  async componentDidMount() {
    const {
      dispatch
    } = this.props;

    await dispatch({
      type: 'app/fetchCurrent',
    });
    
    const {
      user: {
        id
      },
      route: { routes },
    } = this.props

    if (id) {
      dispatch({
        type: 'app/menu',
        payload: {
          routes,
        },
      });
      this.setState({
        loading: false,
      });
    } else {
      router.replace('/login');
    }
  }
  // fixed can't perform a React state update on an unmounted component.
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  render() {
    if (this.state.loading) {
      // NProgress.start()
      return null;
      // return (
      //   <PageLoading />
      // )
    }
    // NProgress.done()
    const { children, ...props } = this.props;
    const {
      route,
      user: { authorities = [] },
    } = props;
    return (
      <ConfigProvider locale={zh_CN}>
        <Authorized
          authorities={authorities}
          authority={route.authority}
          noMatch={<Redirect to="/login" />}
        >
          <BasicLayout {...props}>{children}</BasicLayout>
        </Authorized>
      </ConfigProvider>
    );
  }
}

export default AuthBasicLayout;
